<template>
	<view>
		<view class="fixed_top bgf5">
			<view class="flex_aj h120"><text class="h60 lh60 plr30 bf primary border-r3" @click="isShowQuery = true">查询其他日期</text></view>
			<view class="plr30">
				{{ type == 0 ? '全部' : type == 1 ? '租换电消费' : type == 2 ? '充电消费' : type == 3 ? '租车消费' : type == 4 ? '充值' : type == 8 ? '押金提现' : '--' }}明细
			</view>
		</view>
		<view class="pt180 plr30 pb30">
			<block v-for="(item, index) in loadList" :key="index">
				<view class="mb30 plr30 bf border-r1">
					<view class="flex_a ptb30">
						<view class="flex1">
							<!-- 1：租换电消费， 2：充电消费，3：租车消费，4 ：用户充值，8：押金提现 -->
							<view class="h50">
								<!-- {{
									item.type == 1
										? '租换电消费'
										: item.type == 2
										? '充电消费'
										: item.type == 3
										? '租车消费'
										: item.type == 4
										? '充值'
										: item.type == 8
										? '押金提现'
										: item.type == 9
										? '新用户赠送金额'
										: '--'
								}} -->
								{{item.describes || '--'}}
							</view>
							<view class="c9">{{ item.ctime | formatTime }}</view>
						</view>
						<!-- 提现 -->
						<view class="" v-if="item.type == 8">
							<view class="h50" :class="item.status == 1 ? 'green' : 'warning'">{{ item.status == 1 ? '提现成功' : '提现失败' }}</view>
							<view class="flex_a">
								<text class="plr10">￥{{ item.money }}</text>
							</view>
						</view>
						<!-- 其他 -->
						<view v-else class="tae">
							<text class="plr10" :class="item.symbol == '+' ? 'green' : 'warning'">{{ item.symbol }}￥{{ item.money }}</text>
							<view class="plr10 ptb10 green" v-if="item.out_money>0">
								赠送金额：￥{{item.out_money}}
							</view>
						</view>
					</view>
					<view class="pt20 pb30 bdt c6" v-if="item.type == 8 && item.status == 2">{{ item.describes }}</view>
				</view>
			</block>
			<view class="flex_aj column ptb20" v-if="showTime && loadList.length == 0"><view class="c9 pt20">您还没有相关记录~</view></view>
			<uni-load-more v-if="showTime && loadList.length > 0" :status="loadMoreText" color="#999"></uni-load-more>
		</view>

		<!-- 查询日期 start -->
		<u-popup v-model="isShowQuery" mode="top">
			<view class="plr30 ptb60">
				<view class="h60 c6">查询类型</view>
				<view class="flex_sb flexWW pb20">
					<block v-for="item in typeList" :key="item.state">
						<view class="w210 h60 mb30 lh60 tac border-r4" :class="type == item.state ? 'cf b-primary bd-primary' : 'bd'" @click="type = item.state">
							{{ item.tit }}
						</view>
					</block>
				</view>
				<view class="h60 c6">时间跨度</view>
				<view class="flex_sb flexWW pb20">
					<block v-for="item in timeSpanList" :key="item.state">
						<view class="w210 h60 mb30 lh60 tac border-r4" :class="activeTimeSpan == item.state ? 'cf b-primary bd-primary' : 'bd'" @click="chooseTime(item)">
							{{ item.tit }}
						</view>
					</block>
				</view>
				<view class="h60 c6">日期查询(日期范围不能超过6个月）</view>
				<view class="flex_a mb80">
					<view class="select_w w260 h60 plr30 bd border-r4" @click="selectTime(1)">
						<text :class="startDate ? '' : 'c9'">{{ startDate || '开始日期' }}</text>
						<view class="select_icon flex_aj">
							<u-icon :name="isShowPicker && seleType == 1 ? 'arrow-up-fill' : 'arrow-down-fill'" color="#3282FF" size="20"></u-icon>
						</view>
					</view>
					<text class="plr10 ft24 c9">至</text>
					<view class="select_w w260 h60 plr30 bd border-r4" @click="selectTime(2)">
						<text :class="endDate ? '' : 'c9'">{{ endDate || '结束日期' }}</text>
						<view class="select_icon flex_aj">
							<u-icon :name="isShowPicker && seleType == 2 ? 'arrow-up-fill' : 'arrow-down-fill'" color="#3282FF" size="20"></u-icon>
						</view>
					</view>
					<view class="w100 h60 ml20 tac lh60 cf b-primary border-r4 tap" @click="clearTime">清除</view>
				</view>
				<view class="plr30 mb30"><u-button type="primary" shape="circle" @click="search">确定</u-button></view>
			</view>
		</u-popup>
		<!-- 查询日期 end -->
		<!-- 日期选择器 -->
		<u-picker v-model="isShowPicker" title="日期" mode="time" :default-time="defaultTime" @confirm="confTime"></u-picker>
	</view>
</template>

<script>
import loadMore from '@/mixins/loadMore'
import { tradeRecord } from '@/api/user.js'
export default {
	name: 'balanceDetail',
	mixins: [loadMore],
	data() {
		return {
			showTime: false,
			isShowQuery: false, // 是否展示筛选
			// 0：全部，1：租换电消费， 2：充电消费，3：租车消费，4 ：用户充值，8：押金提现
			type: 0, // 选中的查询类型
			typeList: [
				{ tit: '全部', state: 0 },
				{ tit: '租换电消费', state: 1 },
				// { tit: '充电消费', state: 2 },
				// { tit: '租车消费', state: 3 },
				{ tit: '充值', state: 4 },
				{ tit: '押金提现', state: 8 }
			],
			activeTimeSpan: 0, // 选中的时间跨度
			timeSpanList: [{ tit: '近1月', state: 1 }, { tit: '近3月', state: 3 }, { tit: '近6月', state: 6 }],
			isShowPicker: false, // 时间选择器
			seleType: 1, // 1 开始时间  2 结束时间
			startDate: '', // 开始时间
			endDate: '', // 结束时间
			defaultTime: ''
		}
	},
	methods: {
		async loadData() {
			const res = await tradeRecord({
				pageNum: this.page,
				pageSize: this.limit,
				type: this.type,
				startDate: this.startDate,
				endDate: this.endDate
			})
			this.showTime = true
			this.loadList = this.page == 1 ? res.rows : [...this.loadList, ...res.rows]

			this.pageLength = res.rows.length
			this.loadMoreText = res.rows.length < this.limit ? 'noMore' : 'more'
		},
		// 查询
		search() {
			this.page = 1
			this.isShowQuery = false
			this.loadData()
		},
		// 选择时间 打开时间弹窗
		selectTime(type) {
			this.seleType = type
			if(type==1&&this.startDate) {
				this.defaultTime = this.startDate
			}else if(type==2&&this.endDate) {
				this.defaultTime = this.endDate
			}else {
				this.defaultTime = ''
			}
			this.isShowPicker = true
		},
		// 确认时间弹窗
		confTime(e) {
			console.log(e)
			// 选择开始日期
			if (this.seleType == 1) {
				console.log('this.endDate=',this.endDate);
				if (this.endDate) {
					const diff = +new Date(this.endDate) - e.timestamp * 1000
					if (diff <= 0) {
						return this.toast('开始日期不能大于结束日期')
					}
					const dateObj = this.getLastMonth(6, this.endDate)
					const maxStart = +new Date(dateObj.last.replace('-', '/')) / 1000
					if (e.timestamp < maxStart) {
						return this.toast('日期范围不能超过6个月')
					}
				}
				this.startDate = e.year + '-' + e.month + '-' + e.day
				// 选择结束日期
			} else if (this.seleType == 2) {
				
				if (this.startDate) {
					const diff = e.timestamp * 1000 - +new Date(this.startDate)

					if (diff <= 0) {
						return this.toast('结束日期不能小于开始日期')
					}
					const dateObj = this.getLastMonth(6, e.timestamp * 1000)
					const maxStart = +new Date(dateObj.last.replace('-', '/'))

					if (+new Date(this.startDate) < maxStart) {
						return this.toast('日期范围不能超过6个月')
					}
				}
				this.endDate = e.year + '-' + e.month + '-' + e.day
			}
		},
		// 选择跨度
		chooseTime(item) {
			this.activeTimeSpan = item.state
			// 近n个月
			const { now, last } = this.getLastMonth(item.state)
			this.startDate = last
			this.endDate = now
		},
		// 获取近n个月
		getLastMonth(num, nowDate) {
			const now = nowDate ? new Date(nowDate) : new Date()
			const year = now.getFullYear()
			const month = now.getMonth() + 1 //0-11表示1-12月
			const day = now.getDate()
			// this.startDate = year + '-' + month + '-' + day
			const dateObj = {}
			dateObj.now = year + '-' + month + '-' + day
			let nowMonthDay = new Date(year, month, 0).getDate() //当前月的总天数
			if (month - num <= 0) {
				//如果是1、2、3月，年数往前推一年
				let lastMonthDay = new Date(year - 1, 12 - (num - parseInt(month)), 0).getDate() //num个月前所在月的总天数
				if (lastMonthDay < day) {
					//3个月前所在月的总天数小于现在的天日期
					dateObj.last = year - 1 + '-' + (12 - (num - month)) + '-' + lastMonthDay
				} else {
					dateObj.last = year - 1 + '-' + (12 - (num - month)) + '-' + day
				}
			} else {
				let lastMonthDay = new Date(year, parseInt(month) - num, 0).getDate() //3个月前所在月的总天数
				if (lastMonthDay < day) {
					//3个月前所在月的总天数小于现在的天日期
					if (day < nowMonthDay) {
						//当前天日期小于当前月总天数,2月份比较特殊的月份
						dateObj.last = year + '-' + (month - num) + '-' + (lastMonthDay - (nowMonthDay - day))
					} else {
						dateObj.last = year + '-' + (month - num) + '-' + lastMonthDay
					}
				} else {
					dateObj.last = year + '-' + (month - num) + '-' + day
				}
			}

			return dateObj
		},
		// 清除时间
		clearTime() {
			this.activeTimeSpan = 0
			this.startDate = ''
			this.endDate = ''
		}
	}
}
</script>

<style lang="scss" scoped>
.select_w {
	position: relative;
	line-height: 58upx;
	.select_icon {
		position: absolute;
		top: 0;
		right: 24upx;
		height: 58upx;
	}
}
</style>
